<template>
    <div class="all">
        <div class="search" style="margin-right: 20px;">
            <div>
                <el-form
                    ref="form"
                    :inline="true"
                    :model="form"
                    label-width="80px"
                    size="small"
                >
                    <el-form-item label="关键词:" prop="version">
                        <el-input v-model="form.keyword" placeholder="用户名/昵称/真实姓名" size="small" style="margin-left: 10px;"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button style="margin-left: 20px;" type="primary" size="small" @click="search"
                        >查询
                        </el-button
                        >
                        <el-button @click="resetSearch">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="top">

                <div></div>
                <el-button type="primary" size="small" @click="clickToAdd">+ 新增</el-button>
            </div>
        </div>

        <div class="content">

            <el-table
                :data="operatorList.items"
                size="small"
                max-height="550px"
                style="width: calc(100% - 20px);margin-left: 10px;">
                <el-table-column
                    label="编号"
                    width="70"
                    align="center">
                    <template slot-scope="{row,$index}">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="realname"
                    label="真实姓名"
                    width="160"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="nickname"
                    label="住户昵称"
                    height="50"
                    width="160"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="用户名"
                    height="50"
                    width="160"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="email"
                    label="邮箱"
                    height="50"
                    width="160"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="tenant.name"
                    label="运营方"
                    height="50"
                    width="160"
                    align="center">
                    <template slot-scope="{row}">
                        {{ row.tenant.name || "-" }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                    height="50"
                    width="160"
                    align="center">
                    <template slot-scope="{row}">
                        {{ $formatDateTime(row.createTime) }}
                    </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                    prop="isLock"-->
<!--                    label="是否锁定"-->
<!--                    height="50"-->
<!--                    width="160"-->
<!--                    align="center">-->
<!--                    <template slot-scope="{row}">-->
<!--                        {{ row.isLock == 0 ? "否" : "是" }}-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column label="操作" align="center">
                    <template slot-scope="{ row, $index }">
                        <el-button type="text" @click="clickToPower($event, row)" style="color: #8fb7fe">权限
                        </el-button>
                        <el-button type="text" @click="clickToEdit($event, row)">修改</el-button>
                        <el-button type="text" @click="clickToDel($event, row)" style="color: red">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="form.total"
                    :page-size="form.size"
                    :current-page="form.page"
                    @current-change="currentChange"
                >
                </el-pagination>
            </div>
        </div>
        <Create ref="create"></Create>
        <Update ref="update"></Update>
        <Jurisdiction ref="jurisdiction"></Jurisdiction>
    </div>
</template>

<script>
import {userList, delUser} from "@/admin/api/admin/backStage/account/account"

export default {
    components: {
        Create: () => import("./create"),
        Update: () => import("./update"),
        Jurisdiction: () => import("./jurisdiction.vue"),
    },
    data() {
        return {
            form: {
                size: 10,
                page: 1,
                total: 0,
                keyword: ''
            },
            operatorList: []
        };
    },
    mounted() {
        this.getOperatorList()
    },
    methods: {
        getOperatorList() {
            userList(this.form).then(res => {
                this.operatorList = res.data
            })
        },
        search() {
            this.getOperatorList()
        },
        resetSearch() {
            this.form.keyword = ''
            this.getOperatorList()
        },
        clickToAdd() {
            this.$refs.create.showDialog()
        },
        clickToEdit(e, row) {
            this.$refs.update.showDialog(e, row)
        },
        clickToPower(e, row) {
            this.$refs.jurisdiction.showDialog(e, row)
        },
        clickToDel(e, row) {
            this.$confirm("确定要删除吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delUser(row.id).then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            message: res.message,
                            type: "success",
                        });
                        this.getOperatorList();
                    } else {
                        this.$message({
                            message: res.message,
                            type: "error",
                        });
                    }
                });
            })
                .catch(() => {
                })
        },
        currentChange(val) {
            this.form.page = val
        }
    },

}
</script>

<style lang="less" scoped>
.el-form-item {
    margin: 0 0 0 0 !important;
}
</style>
